import React from 'react'
import { observer } from '@formily/reactive-react'
import { DroppableWidget } from '@designable/react'
import './styles.less'

/**
 * 容器组件
 * - 包裹 DroppableWidget，使其支持拖拽放置功能
 * - 通过 observer 响应式监听 props.children 的变化
 */
export const Container: React.FC = observer((props) => {
  // 渲染 DroppableWidget，包裹所有子元素
  return <DroppableWidget>{props.children}</DroppableWidget>
})

/**
 * 高阶组件：为目标组件添加拖拽容器能力
 * @param Target 目标组件
 * @returns 包裹了 DroppableWidget 的新组件
 */
export const withContainer = (Target: React.JSXElementConstructor<any>) => {
  // 返回一个新的组件，渲染时将 Target 包裹在 DroppableWidget 内
  return (props: any) => {
    return (
      <DroppableWidget>
        <Target {...props} />
      </DroppableWidget>
    )
  }
}